<template>
	<view class="recommend-page-header">
		<view class="recommend-page-header-img">
			<image :src="object.url" mode="aspectFill"></image>
			<view class="recommend-page-header-tag">“{{object.title}}”</view>
		</view>
		<view class="recommend-page-header-des">
			<text>推荐理由：</text>
			{{object.des}}
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			object: {
				type: Object,
				default () {
					return {
						url: '',
						title: '',
						des: ''
					}
				}
			}
		},
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss">
	.recommend-page-header{
		padding-top: 30rpx;
		margin-bottom: 40rpx;
		.recommend-page-header-img{
			position: relative;
			image{
				width: 100%;
				height: 300rpx;
				border-radius: 8rpx 8rpx 0px 0px;
			}
			.recommend-page-header-tag{
				position: absolute;
				height: 52rpx;
				line-height: 52rpx;
				background-color: #000;
				color: #FFF;
				padding: 0 15rpx;
				font-weight: bold;
				border-radius: 8rpx;
				left: 20rpx;
				bottom: 20rpx;
			}
		}
		.recommend-page-header-des{
			padding: 30rpx;
			background-color: #F7F7F7;
			font-size: 24rpx;
			color: #686868;
			line-height: 43rpx;
			border-radius: 0 0 8rpx 8rpx;
			text{
				font-weight: bold;
				color: #000;
			}
		}
	}
</style>
